<template>
<!-- TODO 新增收款包含了 0->其他收款 1->应收回款 2->收采购退款 3->电商收款 不然重复代码过多 可以在列表中直接发起 -->
  <el-dialog v-model="visible" :title="type == null || type === '' ? '新增收款' : '新增收款 - ' + collectionTypeOption[type].label" destroy-on-close width="60%" :close-on-click-modal="false" @close="close">
    <div class="mb-2 flex items-center text-sm">
      <el-form :model="formData" :rules="formRules" size="small" ref="incomeFormRef" label-width="110px" class="drawer-form">
        <el-form-item prop="title" label="主题：">
          <el-input v-model="formData.title" placeholder="请输入事项主题" maxlength="32" clearable style="width: 400px;"/>
        </el-form-item>
        <el-form-item label="描述：" prop="content">
          <editor v-model="formData.content" placeholder="请输入事项描述" height="250px"/>
        </el-form-item>
        <el-form-item prop="collectionType" label="收款类型：">
          <el-select v-model="formData.collectionType" style="width: 300px; height: 26px;"
                     size="small" placeholder="请选择" clearable :disabled="type != null && type !== ''" @change="changeCollectionType">
            <el-option v-for="item in collectionTypeOption" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item label="关联：">
<!--          <module-relate-by-money :relate-items="formData.relateItems" :selected="selectedCode"/>-->

          <module-relate :relate-items="formData.relateItems" :limiter="limiter" @required="required"/>
        </el-form-item>
        <el-form-item prop="collectionTime" label="收款日期：">
          <el-date-picker style="width:125px;" v-model="formData.collectionTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" type="date" placeholder="请选择日期" size="small"/>
        </el-form-item>
        <el-form-item v-if="formData.collectionType !== '0'">
          <el-table :data="list">

          </el-table>
        </el-form-item>
        <el-form-item prop="amount" label="收款金额：" class="inline" v-if="formData.collectionType === '0'">
          <el-input v-model="formData.amount" type="number" placeholder="金额" style="width: 300px;" clearable/>
        </el-form-item>
        <el-form-item prop="amount" label="未回款：" class="inline" v-if="formData.collectionType === '1'">
          <el-input v-model="formData.amount" type="number" placeholder="金额" style="width: 300px;" clearable disabled/>
        </el-form-item>
        <el-form-item prop="amount" label="本次回款：" class="inline" v-if="formData.collectionType === '1'">
          <el-input v-model="formData.amountBack" type="number" placeholder="金额" style="width: 300px;" :disabled="true"/>
        </el-form-item>
        <el-form-item prop="amount" label="退款金额：" class="inline" v-if="formData.collectionType === '2'">
          <el-input v-model="formData.amount" type="number" placeholder="金额" style="width: 300px;" disabled/>
        </el-form-item>
        <el-form-item prop="accountType" label="收款账户：" class="inline">
          <el-input v-model="formData.accountType" placeholder="收款账户" style="width: 300px;"/>
        </el-form-item>
        <el-form-item prop="accountNumber" label="收款账号：" class="inline">
          <el-input v-model="formData.accountNumber" placeholder="收款账号" style="width: 300px;"/>
        </el-form-item>
        <el-form-item prop="type" label="收入类别：" class="inline">
          <el-select v-model="formData.type" style="width: 300px; height: 26px;" size="small" placeholder="请选择" clearable>
            <el-option v-for="item in accountNumberOption" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="type" label="已收发票：" v-if="formData.collectionType === '2'">
          <el-button type="primary" icon="ele-CirclePlusFilled">添加发票</el-button>
        </el-form-item>
        <el-form-item prop="type" label="确认人：" v-if="formData.collectionType !== '0' && formData.collectionType !== ''">
          <el-select v-model="formData.confirmedBy" style="width: 300px; height: 26px;" size="small" placeholder="请选择" clearable disabled>
            <el-option v-for="item in userOption" :label="item.nickname" :value="item.userId"/>
          </el-select>
        </el-form-item>
        <el-form-item prop="lineFile" label="附件：">
          <el-upload class="upload-demo" drag
                     :action="action"
                     :multiple="false"
                     :auto-upload="false"
                     :headers="headers"
                     @change="changeSupplierFile"
                     style="width:100%">
            <el-icon class="el-icon--upload">
              <ele-UploadFilled/>
            </el-icon>
            <div class="el-upload__text">
              拖拽上传或 <em>点击上传</em>
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item prop="remark" label="备注：" class="remark-item">
          <el-input type="textarea" v-model="formData.remark"></el-input>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
          <span class="dialog-footer">
            <el-button size="small" @click="cancel(incomeFormRef)">关闭</el-button>
            <el-button size="small" type="primary" icon="ele-Check" @click="incomeSubmit(incomeFormRef)">保存</el-button>
          </span>
    </template>
  </el-dialog>
</template>

<script>
import { Session } from '/@/utils/storage'
import {reactive, toRefs, ref, computed, onMounted} from 'vue'
import Cookies from "js-cookie";
import {getDeptSelector} from "../../../../api/sys/dept";
import {getEnterpriseUsers} from '/@/api/sys/user';
import { formatDate } from '/@/utils/formatTime'
import Editor from '/@/components/editor/index.vue'
import ModuleRelateByMoney from '/@/views/matter/components/ModuleRelateByMoney.vue'
import ModuleRelate from '/@/views/matter/components/ModuleRelate.vue'
import {getRelateItems} from "../../../../api/matter";

export default {
  name: "Income",
  emits:['onSubmit','update:dialogDrawer'],
  components: {
    Editor,
    ModuleRelateByMoney,
    ModuleRelate
  },
  props: {
    dialogDrawer: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: null,
    },
  },
  setup(props, context) {
    let incomeFormRef = ref()
    const { dialogDrawer, type} = toRefs(props)
    let visible = computed({
      get: () => {
        if (dialogDrawer.value){
          if (type.value != null){
            state.formData.collectionType = type.value
            state.limiter.number = type.value
          }

          getEnterpriseUsers().then(res => {
            state.userOption = res.data
            state.formData.createUserId = Cookies.get('userId')
            state.formData.confirmedBy = Cookies.get('userId')
          })

          getDeptSelector().then(res => {
            state.deptOption = res.data
          })

          state.formData.collectionTime = formatDate(new Date, 'YYYY-mm-dd HH:MM:SS')
          state.dialogDrawer = true
        }
        return dialogDrawer.value
      },
      set: val => context.emit('update:dialogDrawer', val)
    })
    const state = reactive({
      required:[],
      action:'#',
      headers:{ '17work': Session.get('token')},
      selectedCode:{
        code: 'Money',   // 一级关联项数据code
        dataId: null // 二级关联项数据id
      },
      fileList:[],
      //收入form
      formData:{
        title:'',
        content:'',
        collectionType:'',
        confirmedBy:'', //确认人
        relateItems:[],  //关联
        type:'',
        account:'',
        amountBack:'', //本次回款
        accountType:'',
        accountNumber:'',
        remark:'',
        collectionTime:'',
        createUserId:'', //创建人ID
        deptId:''
      },
      userOption:[],  //企业用户列表
      deptOption:[], //企业部门列表
      list:[],
      formRules:{
        collectionType:[{ required: true, trigger: 'blur', message: '请选择'}],
        amount:[{ required: true, trigger: 'blur', message: '请输入'}],
      },
      accountNumberOption:[
        {
          label:'销售回款',
          value:'0'
        },
        {
          label:'退款',
          value:'1'
        },
        {
          label:'交易',
          value:'2'
        },
      ],
      collectionTypeOption:[
        {
          label:'其他收款',
          value:'0'
        },
        {
          label:'应收回款',
          value:'1'
        },
        {
          label:'收采购退款',
          value:'2'
        },
        {
          label:'电商收款',
          value:'3'
        },
      ],
      limiter:{
        module:"income", //代表哪一个钱模块
        number:null  //代表限制编号
      },
    })
    //取消
    const cancel = (formEl) => {
      if (!formEl) return
      formEl.resetFields()
      context.emit("update:dialogDrawer", false)
    }
    //记收入提交
    const incomeSubmit = (formEl) => {
      if (!formEl) return
      formEl.validate((valid) => {
        if (!valid) return // 必填没有填就直接结束
        context.emit('onSubmit', true)
      })
    }
    //关闭时触发
    const close = () => {
      context.emit('update:dialogDrawer', false)
    }
    //文件变更时
    const changeSupplierFile = (file,fileList) => {
      state.fileList = fileList
    }
    //修改收款类型
    const changeCollectionType = (val) => {
      state.limiter.number = val
    }

    return{
      ...toRefs(state),
      dialogDrawer,
      visible,
      incomeFormRef,
      Editor,
      ModuleRelateByMoney,
      ModuleRelate,
      incomeSubmit,
      close,
      cancel,
      changeSupplierFile,
      changeCollectionType
    }
  }

}
</script>

<style scoped>
.inline{
  display: inline-flex;
  width: 50%;
}

:deep input[disabled] {
  -webkit-text-fill-color: #383838 !important;
  -webkit-opacity: 1;
  opacity: 1;
  cursor: not-allowed;
}
</style>
